<template>
  <div>
    <el-dialog
      title="奖金明细"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div>
          <div>
              <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
            <el-form-item label="开始日期">
                <el-date-picker
                  v-model="dataForm.llKssj"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期">
                <el-date-picker
                  v-model="dataForm.value2"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="marginLeft"
                  plain
                  @click="getDataList(1)"
                  >检索</el-button
                >
              </el-form-item>
              </el-form>
          </div>
          <el-row>
          <el-col :span="24">
              <el-table
                :data="tableData"
                ref="multipleTable"
                border
                v-loading="loading"
                max-height="600"
                style="width: 100%; margin-top: 20px"
                @row-click="rowClick"
                >
                <el-table-column
            prop=""
            label="序号"
            min-width="60"
            :formatter="nShowIndex"
            align="center"
            fixed="left"
          ></el-table-column>
            <el-table-column
            prop="ryXm"
            label="姓名"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryGzdw"
            label="单位"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryZwgz"
            label="职务"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryXzjb"
            label="级别判断"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="llKssj"
            label="开始时间"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="llJssj"
            label="结束时间"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ryje"
            label="金额"
            min-width="100"
            align="center"
          ></el-table-column>
              </el-table>
          </el-col>
          </el-row>
          <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <div>
          <el-table
                :data="dataList"
                v-if="showRow"
                border
                v-loading="loading"
                max-height="600"
                style="width: 100%; margin-top: 20px"
               
                >
                <el-table-column
            prop=""
            label="序号"
            min-width="60"
            :formatter="nShowIndexTwo"
            align="center"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="lx"
            label="奖惩事项"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="jjJe"
            label="金额"
            min-width="100"
            align="center"
          ></el-table-column>
          </el-table>
          <div v-if="showRow"  class="avue-crud__pagination">
            <el-pagination
            @size-change="desizeChangeHandle"
            @current-change="decurrentChangeHandle"
            :current-page="depageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="depageSize"
            :total="detotalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
          </div>
          
      </div>
      </div>  
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pageByejld,detailPage} from '@/api/jiangjin/secLeaderBonus';
export default {
  data() {
    return {
        dialogVisible:false,
        dataForm:{},
        tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      depageIndex: 1,
      depageSize: 10,
      detotalPage: 0,
      loading:false,
      dataList:[],
      showRow:false,
      zhuRycode:"",
      deRycode:"",
      llKssj:"",
      llJssj:""
    };
  },
  methods: {
    init(row) {
        this.dialogVisible=true
        this.showRow=false
        this.zhuRycode=row.ryCode
        // //演示用
        // if(row.ryZwjb=='副处级'){
        //   this.tableData=[
        //     {ryXm:row.ryName,ryGzdw:row.deptName,ryZwgz:row.ryZhiwei,ryXzjb:row.ryZwjb,llKssj:"2020-12-30",llJssj:"2021-12-09",ryje:"300000"},
        //     {ryXm:row.ryName,ryGzdw:row.deptName,ryZwgz:row.ryZhiwei,ryXzjb:row.ryZwjb,llKssj:"2021-12-10",llJssj:"9999-12-30",ryje:"500000"},
        //   ]
          
        //   this.dataList=[
        //     {lx:"业绩嘉奖",jjJe:"2000"},
        //     {lx:"考核奖",jjJe:"1000"},
        //   ]
        // }else{
        //   this.tableData=[
        //     {ryXm:row.ryName,ryGzdw:row.deptName,ryZwgz:row.ryZhiwei,ryXzjb:row.ryZwjb,llKssj:"2020-08-04",llJssj:"2022-03-15",ryje:"510000"},
        //   ]
        //   this.dataList=[
        //     {lx:"业绩嘉奖",jjJe:"3000"},
        //   ]
        // }
        this.getDataList()
    },
    getDataList(rycode){
        pageByejld(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm,{ryCode:this.zhuRycode,typecx:1})).then(res=>{
        this.tableData=res.data.data.records
        this.totalPage=res.data.data.total
        })  
    },
    //点击某行
    rowClick(row){
      
        this.showRow=true
        this.deRycode=row.ryCode
        this.llKssj=row.llKssj
        this.llJssj=row.llJssj
        this.getdetailPage()
        
    },
    getdetailPage(ryCode){
        detailPage(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm,{userCode:this.deRycode,llKssj:this.llKssj,llJssj:this.llJssj})).then(res=>{
        this.dataList=res.data.data.records
        this.detotalPage=res.data.data.total
        })
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    nShowIndexTwo(row, column, cellValue, index) {
      return index + 1 + this.depageSize * (this.depageIndex - 1);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 每页数
    desizeChangeHandle(val) {
      this.depageSize = val;
      this.depageIndex = 1;
      this.getdetailPage();
    },
    // 当前页
    decurrentChangeHandle(val) {
      this.depageIndex = val;
      this.getdetailPage();
    },
  },
};
</script>

<style>
</style>